<!--
 * @Description: 花瓣
 * @Author: YoungWind
 * @Date: 2020-09-29 11:58:11
 * @LastEditTime: 2020-09-29 21:34:16
 * @LastEditors: YoungWind
 * @FilePath: \ccd3\src\ccd3\flower\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../css/root.css">
  <link rel="stylesheet" href="../../css/grid.css">
  <script src="../../../libs/d3/d3.v6.js"></script>
</head>

<body>
  <header>
    <h1>花瓣</h1>
  </header>
  <main class="container">
    <h2>Flower</h2>
    <section>
      <div id="flower" style="height:50vh"></div>
    </section>
    <h2>Flowers</h2>
    <section>
      <div id="flowers" style="height:50vh"></div>
    </section>
  </main>

  <script type="module">
    import { Flower, Flowers } from '../../dist/ccd3.js'

    const flower = new Flower('flower')
      .setMargin(25, 35, 50, 50)
      .setPetalsNum(10)
      .setFactor(1)
      // .setFlowerRadius(200)
      .setFlowerWidth(150)
      .setFlowerAngle(Math.PI * 2)
      .setDuration(2000)
      .init()
      .render();

    const flowers = new Flowers('flowers')
      .setMargin(25, 35, 50, 50)
      .setFlowersNum(100)
      .setPetalsNum(10)
      .setFactor(1)
      .setFlowerRadius(15)
      .setFlowerWidth(10)
      .setFlowerAngle(Math.PI * 2)
      .setDuration(2000)
      .setDelay(100)
      .init()
      .render();
  </script>
</body>

</html>